
        $(window).on("load", function () {

            let $smallImg = $("#smallImg");//小图
            let $smallArea = $("#smallArea");//小区域
            let $bigArea = $("#bigArea");//大区域
            let $bigImg = $("#bigImg");//大图
            
            //调整 小区域 比例
            $smallArea.css("height", ($smallImg.height() / $bigImg.height()) * $bigArea.height());
            $smallArea.css("width", ($smallImg.width() / $bigImg.width()) * $bigArea.width())
            
            
            $("#smallImg").on("mouseenter", function () {
                $("#smallArea").show();
                $('#bigArea').show();
            
                $(document).on("mousemove", function (evt) {
                    $("#smallArea").offset({
                        left: evt.pageX - $("#smallArea").width() / 2,
                        top: evt.pageY - $("#smallArea").height() / 2
                    });
                    let smalPostion = $("#smallArea").position();
                    if (smalPostion.left <= 0) {
                        $("#smallArea").css("left", 0)
                    }
                    if (smalPostion.left > $smallImg.width() - $smallArea.width()) {
                        $("#smallArea").css("left", $smallImg.width() - $smallArea.width())
                    }
                    if (smalPostion.top <= 0) {
                        $("#smallArea").css("top", 0)
                    }
                    if (smalPostion.top > $smallImg.height() - $smallArea.height()) {
                        $("#smallArea").css("top", $smallImg.height() - $smallArea.height())
                    }
                    let scale = $bigImg.width() / $("#smallImg").width();
                    $bigImg.css({
                        "top": -scale * smalPostion.top,
                        "left": -scale * smalPostion.left
                    });
                })
            }).on("mouseleave", function () {
                $("#smallArea").hide();
                $('#bigArea').hide()
            })
            })